<template>
	<view class="user" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="xy-user-card flex m-lr-30 p-t-30">
			<view class="l m-r-15">
				<image v-if="user.isLogin" :src="$xyfun.image(user.info.avatar?user.info.avatar:common.appConfig.useravatar)" @tap="$xyfun.to('/pages/user/info')" />
				<image v-else :src="$xyfun.image($xyfun.config().useravatar)" />
			</view>
			<view class="c">
				<view v-if="user.isLogin" @tap="$xyfun.to('/pages/user/info')">
					<view class="ts-32 flex lh-32 p-t-25 tb" :style="css.tcm">
						<text>
							{{user.info.nickname}}
						</text>
					</view>
					<view class="ts-28 lh-28 m-t-15" :style="css.tcl">等级：{{user.info.level ? user.info.level.name : '无'}}</view>
				</view>
				<view v-else @tap="$xyfun.toLogin()">
					<view class="ts-30 lh-32 p-t-20 tb m-t-25" :style="css.tcm">点击登录</view>
				</view>
			</view>
			
		</view>
		
		<view class="xy-wallet m-lr-30 p-tb-20 m-t-40 flex br-20 bc-w" :style="css.tcm" >
			<view class="item yue p-left-30" @tap="$xyfun.to('/pages/user/balance/detail')">
				<view class="num tb ts-32">{{user.isLogin && user.info.money||0.00}}</view>
				<view class="m-t-10 ts-28" :style="css.tcl">账户余额</view>
			</view>
			<view class="item yue tc bl-l" :style="css.blpc" @tap="$xyfun.to('/pages/user/balance/recharge')">
				<view><text class="xyicon icon-recharge ts-40"></text></view>
				<view class="m-t-10 ts-28" :style="css.tcl">充值</view>
			</view>
			<view class="item wallet m-l-auto tc bl-l" :style="css.blpc" @tap="$xyfun.to('/pages/user/balance/detail')">
				<view><text class="xyicon icon-wallet ts-40"></text></view>
				<view class="m-t-10 ts-28" :style="css.tcl">钱包</view>
			</view>
		</view>
		
		<view class="cur-store flex tb m-30 p-30 br-20 bc-w">
			<view>当前场馆</view>
			<view :style="css.tcmc" class="m-l-auto" @tap="$xyfun.to('/pages/store/select')">{{storeInfo.name}}<text class="xyicon icon-right tn ts-26"></text></view>
		</view>
		
		<view class="xy-service m-30 p-30 br-20 bc-w" :style="css.tcm">
			<view class="xy-title flex">
				<view class="tb">我的服务</view>
			</view>
			
			<view class="xy-menu tc m-t-40 col-3">
				
				<view class="list flex">
					<view class="item m-b-40" v-for="(menu, keys) in services" :key="keys">
						<block v-if="menu.link == 'share'">
							<button open-type="share">
								 <image :src="menu.image" />
								 <view class="name m-t-15 lh-30 ts-30">{{menu.name}}</view>
							</button>
						</block>
						<block v-else-if="menu.link == 'contact'">
							<button @tap="$xyfun.phone(storeInfo.phone)">
								 <image :src="menu.image" />
								 <view class="name m-t-15 lh-30 ts-30">{{menu.name}}</view>
							</button>
						</block>
						<block v-else>
							<button @tap="$xyfun.to(menu.link)">
								<image :src="menu.image" />
								<view class="name m-t-15 lh-30 ts-30">{{menu.name}}</view>
							</button>
						</block>
					</view>
				</view>
			</view>
			
		</view>
		
		<xy-tabbar />
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css:{},
				storeInfo:{},
				services:[
					{image:'/static/images/us1.png',name:'我的订单',link:'/pages/user/order/list'},
					{image:'/static/images/us2.png',name:'我的等级',link:'/pages/user/level'},
					{image:'/static/images/us6.png',name:'我的包场',link:'/pages/user/package'},
					{image:'/static/images/us7.png',name:'优惠券',link:' /pages/user/coupon/list'},
					{image:'/static/images/us5.png',name:'联系客服',link:'contact'},
					{image:'/static/images/us4.png',name:'我的资料',link:'/pages/user/info'},
				]
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		onLoad() {
			this.$xyfun.setNavBg()
			this.css = this.$xyfun.css();
		},
		onShow() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			loadData(){
				
				this.$xyfun.storeId().then((store_id)=>{
					this.$api.get({
						url: '/store/detail',
						loadingTip:'加载中...',
						data: {
							id:store_id || 1,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.storeInfo = res;
						}
					});
					
					//刷新用户信息
					if(this.user.isLogin){
						this.getUserInfo();
					}
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.xy-user-card{
		width: 690rpx;
		.l{
			image{width: 110rpx;height: 110rpx;border-radius: 55rpx;}
		}
		.c{
			width: 300rpx;
		}
		.r{
			position: relative;
		}
	}
	
	.xy-wallet{
		.item{width: 31%;}
		.wallet image{width: 50rpx;height: 50rpx;}
	}
	
	.xy-title {
		height: 36rpx;line-height: 36rpx;
		.l{width: 6rpx;border-radius: 3rpx;}
		.r{margin-left: auto;}
	}
	
	.xy-menu{
		width: 660rpx;
		.item{
			width: 33.3%;text-align: center;
			button{
				background: none; padding: 0;margin: 0;
			}
			button::after{border: none;}
		}
		image{width: 50rpx;height: 50rpx;}
	}
	.xy-menu.col-4{
		.item{width: 25%;}
	}
	
	
</style>
